<template>
	<div class="screen">
		<!-- 筛选 -->
		<ul class="screen-box">
			<li class="screen-list" v-for="(scr,index) in scrList" :key="index" @click="clickFn(scr.check,index)">
				<p>{{ scr.title }}</p>
				<span v-show="index!=0" class=""></span>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'screenSub',
	props: [''],
	data() {
		return {
			scrList: [
				{
					title: '综合',
					ret: '',
					check: 0,
					checkTop: '',
					checkBot: ''
				},
				{
					title: '销量',
					ret: '',
					check: 0,
					checkTop: '',
					checkBot: ''
				},
				{
					title: '评价数',
					ret: '',
					check: 0,
					checkTop: '',
					checkBot: ''
				},
				{
					title: '价格',
					ret: '',
					check: 0,
					checkTop: '',
					checkBot: ''
				},
				{
					title: '筛选',
					ret: '',
					check: 0,
					checkTop: '',
					checkBot: ''
				}
			]
		};
	},
	methods: {
		clickFn(check,index){
			console.log(check,index)
			console.log(1)
			this.$emit("clickHandel",'d')
		}
	},
	created() {},
	mounted() {}
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.screen {
	width: 100%;
}
/* 筛选 */
.screen-box {
	width: 100%;
	height: 0.8rem;
	background-color: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-bottom: #f3f3f3 solid 0.01rem;
}

.screen-list {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.screen-list span {
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-image: url(http://i.huasongwang.com/i/c/icon6.png);
	background-position: -8px -50px;
}
.screen-list .checkTop{
	background-position: -28px -50px;
}
.screen-list .checkBot{
	background-position: -48px -50px;
}
.screen-list:last-child span{
	background-position: -117px -50px;
}
</style>
